<template>
    <div>
        <!-- <h1>公用房信息查询</h1> -->
         <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/management' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>公用房</el-breadcrumb-item>
            <el-breadcrumb-item>信息查询</el-breadcrumb-item>
        </el-breadcrumb>
        
        <el-card>
            <el-form :model="roomForm" :inline="true" label-width="100px" >
                    <el-form-item label="校区">
                        <el-select v-model="roomForm.schoolName">
                            <el-option label="北区" value="北区"></el-option>
                        </el-select>
                    </el-form-item>
                <el-form-item label="楼栋">
                    <el-select v-model="roomForm.build">
                        <el-option label="北区" value="北区"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="校区">
                    <el-select v-model="roomForm.schoolName">
                        <el-option label="北区" value="北区"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="楼栋">
                    <el-select v-model="roomForm.build">
                        <el-option label="北区" value="北区"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item class="miniMargin">
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button type="info">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 功能区域 -->
        <div class="features">
            <div class="btn">
                <el-button @click="roomsExport" icon="el-icon-upload2" size="medium" plain>导出</el-button>
                <el-button @click="roomsDelete" icon="el-icon-delete" size="medium" plain>删除</el-button>
                <el-tag type="info">总数: {{this.queryInfo.total}} 条</el-tag>
            </div>
        </div>
        <!-- 数据展示界面 -->
        <el-card>
            <el-table :data="roomslist" stripe :header-cell-style="{backgroundColor:'#f3f3f5'}">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="campusName" label="校区名称" width="130px"></el-table-column>
                <el-table-column prop="campusId" label="校区编号" width="130px"></el-table-column>
                <el-table-column prop="campusPosition" label="位置" width="150px"></el-table-column>
                <el-table-column prop="campusBuildArea" label="建筑面积(㎡)" width="130px"></el-table-column>
                <!-- <el-table-column prop="lands_price" label="价值(元)" width="100px"></el-table-column> -->
                <el-table-column prop="campusNature" label="性质" width="100px"></el-table-column>
                <!-- <el-table-column prop="lands_getType" label="获得方式" width="100px"></el-table-column> -->
                <el-table-column prop="campus_create_time" label="添加日期" width="150px"></el-table-column>
                <el-table-column prop="campusEntryStatus" label="录入" width="100px">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.lands_input ==='1'">是</el-tag>
                        <el-tag type="warning" v-else>否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="250px">
                    <template slot-scope="scope">
                        <!-- 录入按钮 -->
                        <el-tooltip effect="dark" content="录入" placement="top" :enterable="false">
                            <el-button size="mini" type="success" icon="el-icon-download"></el-button>
                        </el-tooltip>
                        
                        <!-- 详情按钮 -->
                        <el-tooltip effect="dark" content="详情" placement="top" :enterable="false">
                            <el-button size="mini" type="info" icon="el-icon-search" @click="showDetails(scope.row)"></el-button>
                        </el-tooltip>
                        
                        <!-- 编辑按钮 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="showSchoolEditDialog(scope.row.campusId)"></el-button>
                        <!-- 删除按钮 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSchool(scope.row.campusId)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <!-- 分页功能 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.page"
                :page-sizes="[10,15]"
                :page-size="queryInfo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="queryInfo.total" background>
            </el-pagination>
            
            
            <!-- 编辑校区信息对话框 -->
            <el-dialog
                title="修改用户"
                :visible.sync="editSchoolDialogVisiable"
                width="50%"
                @close="editSchoolDialogClosed">
                <el-form
                :model="editSchoolForm"
                ref="editSchoolFormRef"
                label-width="100px">
                    <el-row :gutter="30">
                            <el-form-item label="校区名称" prop="campusName" >
                                <el-input v-model="editSchoolForm.campusName" disabled placeholder="请输入校区名称"></el-input>
                            </el-form-item>
                            <el-form-item label="校区编号" prop="campusId">
                                <el-input v-model="editSchoolForm.campusId" disabled placeholder="请输入校区编号"></el-input>
                            </el-form-item>
                            <el-form-item label="性质" prop="campusNature">
                                <el-select v-model="editSchoolForm.campusNature" placeholder="请选择校区性质"  style="width:100%">
                                    <el-option label="性质一" value="性质一"></el-option>
                                    <el-option label="性质一" value="性质二"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="占地面积" prop="campusArea">
                                <el-input v-model="editSchoolForm.campusArea" placeholder="请输入占地面积"></el-input>
                            </el-form-item>
                            <el-form-item label="建筑面积" prop="campusBuildArea">
                                <el-input v-model="editSchoolForm.campusBuildArea" placeholder="请输入建筑面积"></el-input>
                            </el-form-item>
                            <el-form-item label="位置" prop="campusPosition">
                                <el-input v-model="editSchoolForm.campusPosition" placeholder="请选择校区位置"  style="width:100%"></el-input>
                            </el-form-item>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="editSchoolDialogVisiable = false">取 消</el-button>
                <el-button type="primary" @click="reSubmitCapmuseForm">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>   
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 校区编辑
            editSchoolDialogVisiable:false,
            queryInfo:{
                // 当前页数
                page: 1,
                // 当前每页显示多少数据
                size: 10,
                total: 0,  
            },
            roomForm:{
                schoolName:'',
                build:'',
                
            },
            roomslist:[],
            // 校区编辑表单
            editSchoolForm:{
                campusName:'',
                campusId:'',
                campusNature:'',
                campusArea:'',
                campusBuildArea:'',
                campusPosition:''
            } 
        }
    },
    created(){
        this.getSchoolsList()
    },
    methods: {
        
        // 获取校区数据
        async getSchoolsList(){
            await this.$http.get(`campus/p/${this.queryInfo.page}/${this.queryInfo.size}`).then(res=>{
                 // console.log(res);
                if(res.data.code !==1){
                    return this.$message.error('校区信息获取失败！');
                }
                this.roomslist = res.data.data.list;
                this.queryInfo.total = res.data.data.total;
            });
        },
        // 每页展示变化
        handleSizeChange(newSize){
            this.queryInfo.size = newSize;
            this.getRoomsList();
        },        
        // 页码变化
        handleCurrentChange(newPage){
            this.queryInfo.page = newPage;
            this.getRoomsList();
        },
        // 显示编辑校区信息对话框
       async showSchoolEditDialog(campusId){
            await this.$http.get(`campus/${campusId}`).then(res=>{
                if(res.data.code!==1){
                    return this.$message.error('编辑失败！');
                }
                this.editSchoolDialogVisiable = true;
                this.editSchoolForm = res.data.data
                // console.log(res);
            })
        },
        
        async reSubmitCapmuseForm(){
            const res = await this.$http.put('campus',this.editSchoolForm);
            console.log(res);
        },
        // 关闭编辑校区对话框
        editSchoolDialogClosed(){
            
        },
        // 删除校区信息
        async deleteSchool(campusId){
            // 弹窗询问
            const conFirmResult = await this.$confirm(
                "此操作将永久删除该条校区信息, 是否继续?",
                "提示",
                {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                }
                // 用catch捕获错误消息
            ).catch((err) => err);
            // 确认删除:confirm  取消删除:cancel
            if (conFirmResult !== "confirm") {
                return this.$message.info("已取消删除！");
            }
            await this.$http.delete(`campus/${campusId}`).then(res=>{
                console.log(res);
                if(res.data.code!==1){
                    return this.$message.error('校区信息删除失败(因为该校区下有楼栋信息)！');
                }
                this.getSchoolsList();
            })
            
        },
        
        // 模糊查询
        search(){
            // console.log(this.roomForm);
        },
    
        
        
        //  按钮操作  导入 导出 删除 筛查
        roomsImport(){},
        roomsExport(){},
        roomsDelete(){},
        roomsScreen(){},
        
        // 查看房间详情
        showDetails(row){
            // console.log(row._id);
            // this.$router.push(`roomsDetails/${row._id}`)
        },
    },
}
</script>
<style scoped>
</style>
